<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_CSS常用值</title>
    <style>h1{color: red;
    /* rgb(red,green,blue) 取值范围[0,255]*/
    color: rgb(255,0,0);
    color: rgb(0,255,255);
    color: rgb(0,255,0);
    color: rgb(255,0,255);
    color: rgb(0,0,255);
    color: rgb(255,255,0);
    color: rgb(0,0,0);
    color: rgb(255,255,255);
    color: rgb(128,128,128);
    /* 十六进制颜色表示法 #rrggbb 取值范围[00,FF]*/
        color: #ff0000;
        color: #00ff00;
        color: #0000ff;
        color: #000000;
        color: #ffffff;
        /* 十六进制颜色简写表示法 #rgb 取值范围[0,F] 需要每种颜色的两个数字一样，且每对都有重复数字才可以简写*/
        color: #F00;
        color: #0F0;
        color: #00F;
        color: #000;
        color: #FFF;
    }
    div{width: 100px;height: 100px;border: 3px solid #000;}
    .d1{background-color: rgba(0,0,255,1);}
    .d2{background-color: rgba(0,0,255,0.7);}
    .d3{background-color: rgba(0,0,255,0.4);}
    .d4{background-color: rgba(0,0,255,0.1);}
    .d5{background-color: rgba(0,0,255,0);}
    .bgi{width:500px;height:300px;
        /* 背景处理：渐变（角度，颜色1，颜色2...）*/
        background-image:linear-gradient(130deg,red,cyan);}
    /* viewport：视口，用来展示页面内容的完整窗口 */
    .viewport{width: 100vw;  /* 100% viewport width 撑满全屏宽*/
              height: 100vh;  /* 100% viewport height 撑满全屏高*/
              background-color: orange ;}
    </style>
</head>
<body>
    <div class="viewport"></div>
    <div class="bgi"></div>
    <h1>测试颜色</h1>
    <!-- .d*5 Tab -->
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
    <div class="d5"></div>
</body>
</html>